<template>
  <div>
    <div class="page-container">
      <div class="handle-box">
        <span class="inputName">赛事列表：</span>
        <el-select v-model="query.active_id" filterable placeholder="请选择" @change="activeChange">
          <el-option :value="item.id" :label="item.title" v-for="item in activeList" :key="item.id"></el-option>
        </el-select>
        <span class="inputName">姓名/手机号码：</span>
        <el-input placeholder="请输入姓名/手机号码" v-model="query.keyword" @keyup.enter="initAjaxMethod" class="inputbox"
          style="width: auto; margin-right: 10px"></el-input>
        <span style="padding: 8px"></span>
        <el-button type="success" icon="el-icon-search" size="medium" @click="searchTemplate">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="序号" width="50" align="center">
            <template scope="scope">
              <span>{{ scope.$index + (query.page - 1) * query.pageSize + 1 }}</span>
            </template>
          </el-table-column> 
          <el-table-column label="姓名" align="center" prop="nickname" />
          <el-table-column label="手机号码" align="center" prop="mobile" />
          <el-table-column label="总得分" align="center" prop="total_scoring" />
          <el-table-column label="平均分" align="center">
            <template slot-scope="scope">{{ scope.row.avg_scoring?Number(scope.row.avg_scoring).toFixed(2):'0:00' }}</template>
          </el-table-column>
          <el-table-column label="总排名" align="center" prop="rank" />
          <el-table-column label="报名时间" align="center" prop="create_time" :formatter="$GLOBAL.dateFormat" />
          <el-table-column label="报名赛事" align="center">
            <template slot-scope="scope">{{ scope.row.active_title }}</template>
          </el-table-column>
          <el-table-column label="证书状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.certificate">已上传</span>
              <span v-else>未上传</span>
            </template>
          </el-table-column>
          <el-table-column label="支付订单号" align="center" prop="order_num" />
          <el-table-column label="证书付费状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.play_status == 1">已付费</span>
              <span v-else>未付费</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row, 1)" type="text" size="small">证书上传</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialog" width="70%">  
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">证书:</div>
          </el-col>
          <el-col :span="21">
            <img-upload :img-url.sync="certificate.certificate"></img-upload>
            <p style="padding:6px;color:red;font-size:12px;">(jpg,jpeg,png格式)</p>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="addAjaxMethod">确 定</el-button>
      </span>
    </el-dialog>
    <el-image-viewer v-if="showPictureView" :zIndex="Number(99999)" :on-close="() => showPictureView = false"
      :url-list="viewImgList" :initialIndex="viewPicIndex" />
  </div>
</template>

<script>
import global from '@/utils/global';
import downExcel from '@/components/ExcelModel/ExcelModel.vue';
import ElImageViewer from '@/components/imageViewer/imageViewer.vue';
import ImgUpload from '@/components/imgUpload/ImgUpload.vue';
export default {
  components: { downExcel, ElImageViewer, ImgUpload },
  name: 'contract',
  data() {
    return {
      temExcel: this.$API.TEMPLATE_EXCEL,
      docLoadPath: this.$API.API_PATH + this.$API.LOGIN_EXCEL,
      tableData: [], //数据列表
      activeList: [], //数据列表
      reviewList: [], //数据列表
      query: {
        page: 1,
        keyword: '',
        pageSize: 10,
        active_id: '',
      },
      showPictureView: false,
      viewPicIndex: 0,
      viewImgList: [],
      disabled: false,
      modelType: 1,
      itemId: '',
      total: 0,
      multipleSelection: [],
      type_hdlx: 0,
      type: 0,
      dialogTitle: '新建开票',
      addOrEdit: 1,
      signup_id: '',
      dialog: false,
      certificate: {
        certificate: '',
        signup_id: ''
      }

    };
  },
  filters: {
    formDate: (val) => {
      return global.getdate1(val);
    }
  },
  mounted() {
    this.tempAjaxMethod();
  },
  methods: {
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchTemplate() {
      this.query.page = 1;
      this.initAjaxMethod();
    },
    reset() {
      this.query.page = 1;
      this.query.keyword = '';
      this.initAjaxMethod();
    },
    activeChange(){
      this.query.page = 1;
      this.initAjaxMethod();
    },
    //企业列表接口
    initAjaxMethod() {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.RANK_INDEX, {
          active_id: this.query.active_id,
          keyWord: this.query.keyword
        })
        .then((res) => {
          console.log('报名列表', res);
          loading.close();
          if (res.code == 1) {
            let list = Array.isArray(res.data) ? res.data : [];
            this.tableData = list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    tempAjaxMethod() {
      this.$http
        .post(this.$API.RANK_ACTIVELIST)
        .then((res) => {
          if (res.code == 1) {
            this.activeList = Array.isArray(res.data) ? res.data : [];
            if(this.activeList.length>0){
              this.query.active_id=this.activeList[0].id;
              this.initAjaxMethod();
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });

      this.$http
        .post(this.$API.ZHACTIVE_SIGNUP_REVIEWLIST)
        .then((res) => {
          if (res.code == 1) {
            this.reviewList = Array.isArray(res.data) ? res.data : [];
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //重置
    reset() {
      this.query.page = 1;
      this.query.keyword = '';
      this.initAjaxMethod();
    },
    //点击第几页
    handlePageChange(currentPage) {
      this.query.page = currentPage;
      this.initAjaxMethod();
    },
    //点击第几页
    handleSizeChange(currentPage) {
      this.query.pageSize = currentPage;
      this.initAjaxMethod();
    },
    handleClick(row, flag) {
      if (flag == 1) {
        this.dialogTitle='证书上传';
        this.dialog = true;
        this.certificate={
          certificate:'',
          signup_id:row.id
        };
      }
    },
    addAjaxMethod() {
      if(!this.certificate.certificate){
        return this.$message.error('请上传证书');
      }
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.RANK_ADDCERTIFICATE, this.certificate)
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('操作成功');
            this.dialog = false;
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          loading.close();
          this.$message.error(err.msg);
        });
    }
  }
};
</script>

<style scoped>
/* .inputName {
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
  } */
.handle-box {
  padding: 10px 0;
}

.inputName {
  font-size: 15px;
  padding: 0 10px;
}

.inputbox {
  width: 200px;
  margin-right: 20px;
}

.searchGroup {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 20px;
}

.list-group {
  padding: 10px;
}

.list-title {
  padding: 7px 0;
}

.el-upload--text {
  width: auto !important;
  height: auto !important;
}

.mast-icon {
  color: red;
}
</style>
